<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  将下列模版
  <xmp>
    <div :class="c" class="demo" v-if="isShow">
      <span v-for="item in sz">{{item}}</span>
    </div>
  </xmp>
  转换成
  <pre>
    {
      /* 标签属性的map，记录了标签上属性 */
      'attrsMap': {
          ':class': 'c',
          'class': 'demo',
          'v-if': 'isShow'
      },
      /* 解析得到的:class */
      'classBinding': 'c',
      /* 标签属性v-if */
      'if': 'isShow',
      /* v-if的条件 */
      'ifConditions': [
          {
              'exp': 'isShow'
          }
      ],
      /* 标签属性class */
      'staticClass': 'demo',
      /* 标签的tag */
      'tag': 'div',
      /* 子标签数组 */
      'children': [
          {
              'attrsMap': {
                  'v-for': "item in sz"
              },
              /* for循环的参数 */
              'alias': "item",
              /* for循环的对象 */
              'for': 'sz',
              /* for循环是否已经被处理的标记位 */
              'forProcessed': true,
              'tag': 'span',
              'children': [
                  {
                      /* 表达式，_s是一个转字符串的函数 */
                      'expression': '_s(item)',
                      'text': '{{item}}'
                  }
              ]
          }
      ]
  }
  </pre>
  <script>
    let html = `<div :class="c" class="demo" v-if="isShow"><span v-for="item in sz">{{item}}</span></div>`

    // 正则
    const ncname = '[z-aA-Z_][\\w\\-\\.]'

    // 截取已经匹配过的部分
    function advance(num) {
      html = html.substring(num)
    }
  </script>
</body>

</html>